
<template>
<div class="age detailedParent">
  <div class="detailed"><img src="../../../public/detailed.svg" alt="放大" @click="dialogVisible = true"></div>
  <div id="age-main"></div>
</div>
  <el-dialog v-model="dialogVisible" title="图表详情" width="80vw" height="height">
    <div>
      <DetailedAge></DetailedAge>
    </div>
  </el-dialog>
</template>

<style scoped>
.age{
  height: 100%;
  width: 100%;
}

#age-main{
  height: 100%;
  width: 100%;
}
</style>

<script setup>
import * as echarts from 'echarts';
import {onMounted,ref} from "vue";
import DetailedGender from "@/components/DemographicCharacteristics/detailed/DetailedGender.vue";
import DetailedAge from "@/components/DemographicCharacteristics/detailed/DetailedAge.vue";
import {getFemaleAge, getMaleAge} from "@/api/age.js";
import {useDetailedStore} from "@/store/useDetailedStore.js";
import {detailedAgeEvent} from "@/consts/eventName.js";
import theme from "../../../static/theme/walden.json"


let chartDom
let myChart
let option;

let dialogVisible = ref(false)

let initYear = 2023

let detailedStore = useDetailedStore()

onMounted(()=>{
  getMaleAge(initYear).then((value)=>{
    let data = value.data
    let yAxisData = []
    let maleData = []

    data.forEach((item)=>{
      const jsonMap = new Map(Object.entries(item));
      yAxisData.push(jsonMap.keys().next().value)
      maleData.push(jsonMap.values().next().value)
    })

    return {
      yAxisData:yAxisData,
      maleData:maleData
    }
  }).then((valueOut)=>{
    let femaleData = []

    getFemaleAge(initYear).then((value)=>{
      let data = value.data

      data.forEach((item)=>{
        const jsonMap = new Map(Object.entries(item));
        femaleData.push(jsonMap.values().next().value * -1)
      })
      return {
        yAxisData:valueOut.yAxisData,
        maleData:valueOut.maleData,
        femaleData:femaleData
      }
    }).then((value)=>{

      if (detailedStore.detailedLoadFlag.get(detailedAgeEvent)){

      }else {
        detailedStore.detailedData.set(detailedAgeEvent,value)
      }

      chartDom = document.getElementById('age-main');
      myChart = echarts.init(chartDom,theme);

      option = {
        title: {
          text: '人口金字塔',
          left: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return params[0].name + '<br/>' +
                params[0].seriesName + ': '   + Math.abs(params[0].data).toFixed(2) + '%' + '<br/>' +
                params[1].seriesName + ': '  + Math.abs(params[1].data).toFixed(2) + '%';
            // 提示框内容格式化函数，params参数包含了鼠标悬停时的数据
          }
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: value.yAxisData,
          show: false
        },
        series: [
          {
            name: '男性',
            type: 'bar',
            stack: 'total',
            // itemStyle: {
            //   color: '#5793f3'
            // },
            data: value.maleData
          },
          {
            name: '女性',
            type: 'bar',
            stack: 'total',
            // itemStyle: {
            //   color: '#d14a61'
            // },
            data: value.femaleData
          }
        ]
      };
      option && myChart.setOption(option);
    })
  })
})



</script>
